<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!--新增医生-->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增医生</title>
<link rel="shortcut icon" href="img/favicon.ico">
<!--STYLESHEET-->
<!--=================================================-->
<!--Roboto Slab Font [ OPTIONAL ] -->
<link
	href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700"
	rel="stylesheet">
<link
	href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400"
	rel="stylesheet">
<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Jasmine Stylesheet [ REQUIRED ]-->
<link href="css/style.css" rel="stylesheet">
<!--Font Awesome [ OPTIONAL ]-->
<link href="plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<!--Switchery [ OPTIONAL ]-->
<link href="plugins/switchery/switchery.min.css" rel="stylesheet">
<!--Bootstrap Select [ OPTIONAL ]-->
<link href="plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet">
<!--Demo [ DEMONSTRATION ]-->
<link href="css/demo/jasmine.css" rel="stylesheet">
<!--SCRIPT-->
<!--=================================================-->
<!--Page Load Progress Bar [ OPTIONAL ]-->
<link href="plugins/pace/pace.min.css" rel="stylesheet">
<script src="plugins/pace/pace.min.js"></script>
</head>

<body>
	<div id="container"
		class="effect mainnav-sm navbar-fixed mainnav-fixed">
		<div class="boxed">

			<header id="navbar">
				<div id="navbar-container" class="boxed">
					<div class="navbar-content clearfix">
						<ul class="nav navbar-top-links pull-left">
							<li class="tgl-menu-btn"><a class="mainnav-toggle" href="#">
									<i class="fa fa-navicon fa-lg"></i>
							</a></li>
						</ul>
						<ul class="nav navbar-top-links pull-right">
							<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
							<li id="dropdown-user" class="dropdown"><a href="#"
								data-toggle="dropdown" class="dropdown-toggle text-right"> <span
									class="pull-right"> <img
										class="img-circle img-user media-object" src="img/super.png"
										alt="Profile Picture">
								</span>
									<div class="username hidden-xs">super</div>
							</a></li>
						</ul>
					</div>
				</div>
			</header>
			<!--CONTENT CONTAINER-->
			<!--===================================================-->
			<div id="content-container">
				<div class="pageheader hidden-xs">
					<h3>
						<i class="fa fa-home"></i>医疗系统超级管理员界面
					</h3>
				</div>
				<!--Page content-->
				<!--===================================================-->
				<div id="page-content">
					<div class="row">
						<div class="col-lg-12">
							<div class="panel" style="margin-bottom: 0px;">
								<div class="panel-heading">
									<h3 class="panel-title">添加医生</h3>
								</div>
								<div class="panel-heading" style="margin-bottom: 0px;">
									<h5 class="panel-title" style="font-size: 16px;">-->填写基本信息</h5>
								</div>
								<div>
										<form action="../SuperAdminServlet" method="post" enctype="multipart/form-data">
										<div style="margin-left: 130px;">
											<span>头像：</span><img  id="preview-img" src="" style="width:50px;height:50px;"><br> 
											<input type="file" id="picture" name="file" value="" placeholder="未选择头像" accept=”image/jpg，image/jpeg, image/png, image/gif”><br>
							 			</div>
										<input type="hidden" name="op" value="insert-doctor">
										<span class="panel-title"
											style="font-size: 14px; margin-left: 11%;">*医生姓名：</span> <label
											id="hospitalTip"></label><input id="demo-foo-search"
											type="text" placeholder="必填"
											class="form-control search-input"
											style="width: 30%; height: 30px; margin-left: 11%;"
											name="doctorsName"> <span class="panel-title"
											style="font-size: 14px; margin-left: 11%;">*密码：</span> <label
											id="hospitalTip"></label><input id="demo-foo-search"
											type="text" placeholder="必填"
											class="form-control search-input"
											style="width: 30%; height: 30px; margin-left: 11%;"
											name="doctorPassword"> <span class="panel-title"
											style="font-size: 14px; margin-left: 11%;">*身份证号码：</span><label
											id="hospitalTip"></label> <input id="demo-foo-search"
											type="text" placeholder="必填"
											class="form-control search-input"
											style="width: 30%; height: 30px; margin-left: 11%;"
											name="doctorIdentifId"> <span class="panel-title"
											style="font-size: 14px; margin-left: 11%;">*性别：</span> <label
											id="hospitalTip"></label><input id="demo-foo-search"
											type="text" placeholder="必填"
											class="form-control search-input"
											style="width: 30%; height: 30px; margin-left: 11%;"
											name="doctorSex"> <span class="panel-title"
											style="font-size: 14px; margin-left: 11%;">*电话号码：</span><label
											id="hospitalTip"></label> <input id="demo-foo-search"
											type="text" placeholder="必填"
											class="form-control search-input"
											style="width: 30%; height: 30px; margin-left: 11%;"
											name="doctorTel">
										<div class="panel-heading" style="margin-bottom: 0px;">
											<h5 class="panel-title" style="font-size: 16px;">-->选择医院</h5>
										</div>
										<div class="form-group">
											<select id="demo-foo-filter-hospital"
												class="form-control search-input"
												style="width: 30%; height: 30px; margin-left: 11%;">
											</select>
										</div>
										<div class="panel-heading" style="margin-bottom: 0px;">
											<h5 class="panel-title" style="font-size: 16px;">-->选择科室</h5>
										</div>
										<select id="demo-foo-filter-department"
											class="form-control search-input"
											style="width: 30%; height: 30px; margin-left: 11%;"
											name="departmentId">
											<!-- <option value="">选择所属科室</option>
									<option value="active">内科</option>
									<option value="disabled">外科</option>
									<option value="suspended">儿科</option> -->
										</select>
										<button type="submit" class="btn btn-block btn-primary"
											style="width: 13%; margin-top: 30px; margin-left: 70%;" id="">提交</button>
									</form>
								</div>


							</div>


						</div>
					</div>
				</div>
			</div>
			<nav id="mainnav-container">
				<!--Brand logo & name-->
				<!--================================-->
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"> <i
						class="fa fa-forumbee brand-icon"></i>
					</a>
				</div>
				<div id="mainnav">
					<div id="mainnav-menu-wrap">
						<div class="nano">
							<div class="nano-content">
								<ul id="mainnav-menu" class="list-group">
									<!--Category name-->
									<!--Menu list item-->
									<li><a href="superadminhomepage.jsp"> <i
											class="fa fa-home"></i>
									</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</nav>
		</div>
		<!-- FOOTER -->
		<!--===================================================-->
		<footer id="footer">
			<!-- Visible when footer positions are fixed -->
			<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

			<!-- Visible when footer positions are static -->
			<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			<div class="hide-fixed pull-right pad-rgt">Currently v1.0</div>
			<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			<!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. -->
			<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
			<p class="pad-lft">jja2007 @2020医疗系统</p>
		</footer>
	</div>

	<script src="js/jquery-2.1.1.min.js"></script>
	<!--BootstrapJS [ RECOMMENDED ]-->
	<script src="js/bootstrap.min.js"></script>
	<!--Fast Click [ OPTIONAL ]-->
	<script src="plugins/fast-click/fastclick.min.js"></script>
	<!--Jquery Nano Scroller js [ REQUIRED ]-->
	<script src="plugins/nanoscrollerjs/jquery.nanoscroller.min.js"></script>
	<!--Metismenu js [ REQUIRED ]-->
	<script src="plugins/metismenu/metismenu.min.js"></script>
	<!--Jasmine Admin [ RECOMMENDED ]-->
	<script src="js/scripts.js"></script>
	<!--Switchery [ OPTIONAL ]-->
	<script src="plugins/switchery/switchery.min.js"></script>
	<!--Bootstrap Select [ OPTIONAL ]-->
	<script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<!--FooTable [ OPTIONAL ]-->
	<script src="plugins/fooTable/dist/footable.all.min.js"></script>
	<!--Fullscreen jQuery [ OPTIONAL ]-->
	<script src="plugins/screenfull/screenfull.js"></script>
	<!--FooTable Example [ SAMPLE ]-->
	<script src="js/demo/pages-directory.js"></script>
	<script>
		$(document).ready(function() {

			var op = "${param.op}"
			if (op == "success") {
				alert("医生注册成功！")
				location.href="superinsertdoctor.jsp";
			}
			// 头像选择做改变事件
			$("#picture").change(function(){
				// 生成图片预览功能
				// 1.得到文件列表数组,获取数组中第一个文件
				var imgFile = this.files[0];

				// 判断是否有上传文件
				if(imgFile==null){	
					$("#preview-img").prop("src","#");			
				}else{
					// 正则表达式验证选择的是否是图片类型
					var regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
					if (!regexImageFilter.test(imgFile.type)) {
						 alert("请选择有效图片");
						 $("#picture").val("");
					}else{ 
						// 2.构建文件读取流对象
						var fileReader =  new FileReader();
						// 3.利用流对象获取文件内容
						fileReader.readAsDataURL(imgFile);
						// 4.加载事件
						fileReader.onload = function(){
							// 5.渲染头像预览框
							$("#preview-img").prop("src",this.result); // this.result从文件读取流对象中获取数据
						}
					 } 
				}
				
		})
			//进入显示医院下拉列表
			$.ajax({
				async : true,
				url : "../SuperAdminServlet",
				type : "get",
				data : {
					op : "hospital"
				},
				dataType : "json",
				success : function(result) {
					//调用渲染数据的方法
					showHospital(result);
				},
				error : function() {
					alert("异步请求失败！")
				}
			});

		});
		//对用户输入框失去焦点事件,显示所在医院科室信息
		$("#demo-foo-filter-hospital").blur(function() {
			var hospitalId = $("#demo-foo-filter-hospital").val();
			//发送异步请求
			$.ajax({
				async : true,
				url : "../SuperAdminServlet",
				type : "get",
				data : {
					op : "findDepartment",
					hospitalId : hospitalId
				},
				dataType : "json",
				success : function(result) {
					//渲染
					showDepartment(result);
				},
				error : function() {
					alert("异步请求失败");

				}

			});

		});
		//判断是否有输入
		$("#demo-foo-search").blur(function() {
			var hospitalName = $(this).val();
			if (hospitalName.trim().length == 0) {
				$("#hospitalTip").text("此处不能为空");
				$("#hospitalTip").removeClass("success");
				$("#hospitalTip").addClass("error");
				//提交按钮禁用
				$("#insert-department").prop("disabled", true);
			} else {
				//提交按钮启用
				$("#insert-department").prop("disabled", false);
			}
		});

		//进入页面显示医院
		function showHospital(result) {
			var content = "";
			for (var i = 0; i < result.length; i++) {
				content += "<option value=\""+result[i].hospitalId+"\">"
						+ result[i].hospitalName + "</option>"
			}
			$("#demo-foo-filter-hospital").html(content);
		}
		//根据选择医院显示科室内容
		function showDepartment(result) {
			var content = "";
			for (var i = 0; i < result.length; i++) {
				content += "<option value=\""+result[i].departmentId+"\">"
						+ result[i].departmentName + "</option>"
			}
			$("#demo-foo-filter-department").html(content);

		}
		
		
		// 服务器提示上传文件类型不匹配
		var uploaderror = "${param.fileuploaderror}";
		if(uploaderror!=""){
			if(uploaderror=="notfile"){
				alert("请上传照片");
				location.href = "${pageContext.request.contextPath}/back/superinsertdoctor.jsp";
			}else{
				alert("请选择有效图片");
				location.href = "${pageContext.request.contextPath}/back/superinsertdoctor.jsp";
			}
		}
		
	</script>

</body>

</html>